<template>
    <!-- 登录窗体 -->
    <div class="login_container">
        <!-- 登录窗体 -->
        <div class="login_box">
            <div class="login-pane">登录</div>
            <Form ref="userEntity" :model="adminEntity" :rules="ruleUser">
                <FormItem prop="user">
                    <Input type="text" v-model="adminEntity.phone" placeholder="Username" size="large"
                           prefix="ios-contact">
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="adminEntity.password" placeholder="Password" size="large"
                           prefix="md-lock">
                    </Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('userEntity')" long size="large">登录</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>

<script>

import { globalUrl } from '../api/doMain'

export default {
    data () {
        return {
            adminEntity: {
                phone: '',
                password: ''
            },
            ruleUser: {
                phone: [
                    {
                        required: true,
                        message: '登录账号不能为空',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '登录密码不能为空',
                        trigger: 'blur'
                    },
                    {
                        type: 'string',
                        min: 6,
                        max: 12,
                        message: '登录密码6~12位',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        // 登录方法，先进行规则验证
        handleSubmit (name) {
            const that = this
            this.$refs[name].validate((valid) => {
                if ( valid ) {
                    that.http.post(globalUrl + '/admin/querySingle', that.adminEntity).then(function (response) {
                        if ( response.data.code === '000000' ) {
                            that.msg.success('登录成功....')
                            window.sessionStorage.setItem('token', response.data.data.token)
                            that.$router.push('/index')
                        } else if ( response.data.code === '000002' ) {
                            that.msg.error('账号或密码错误')
                        }
                    })
                } else {
                    that.msg.error('账号或密码错误')
                }
            })
        }
    }
}
</script>

<style scoped>
.login_container {
    background: linear-gradient(135deg, #050921, rgba(73, 43, 153, 0.89));
    height: 100%;
}

.login_box {
    width: 25%;
    height: 50%;
    background-size: cover;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.login-pane {
    margin: 20px 0;
    font-size: 25px;
    font-weight: 700;
    color: #409EFF;
    text-align: center;
}

.login_form {
    position: absolute;
    top: 40%;
    width: 55%;
    padding: 0 40px;
    box-sizing: border-box;
}

.el-button {
    width: 100%;
    border-radius: 20px;
}

.btns {
    width: 100%;
}

.register {
    width: 50%;
    height: 70%;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.register_form {
    width: 40%;
    margin: auto;
}

.register-pane {
    width: 40%;
    top: 20%;
    font-size: 25px;
    font-weight: 700;
    color: #409EFF;
    margin: 20px auto;
    text-align: center;
}

.el-form-item {
    margin-bottom: 25px !important;
}
</style>
